<template>
  <a-tabs tab-position="left" @change="TabPaneChange">
    <a-tab-pane v-for="tab in secCate.data" :key="tab._id" :tab="tab.name">
      <a-table :columns="columns" :data-source="data.tableData" :pagination="pagination">
        <template v-slot:name="{ text }">
          <a>{{ text }}</a>
        </template>
        <template v-slot:image="{ text: image }">
          <span>
            <img :src="image" alt="" style="height:50px" />
          </span>
        </template>
        <template v-slot:action="{ record }">
          <span @click.stop="">
            <a @click="handleEdit(record.key)">Edit</a>
            <a-divider type="vertical" />
            <a-popconfirm ok-text="Yes" cancel-text="No" @confirm="handleDelete(record.key)"
              title="Are you sure delete this category?">
              <a href="javascript:;">Delete</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </a-tab-pane>
  </a-tabs>

</template>
<script>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import { ResourceDelete, GetSecCate, GetCourseByParentCategory, GetParentCateById } from '../ceshi.js'
import router from '../router'
const columns = [
  {
    title: 'Id',
    dataIndex: '_id',
    key: '_id',
    slots: { title: 'customTitle' }
  },
  {
    title: '课程名称',
    dataIndex: 'title',
    key: 'title',
    slots: { title: 'customTitle' }
  },
  {
    title: '作者',
    dataIndex: 'author.name',
    key: 'author.name',
    slots: { title: 'customTitle' }
  },
  {
    title: '图片',
    key: 'image',
    dataIndex: 'image',
    slots: { customRender: 'image' }
  },
  {
    title: '分类',
    key: 'category[0].name',
    dataIndex: 'category[0].name',
    slots: { title: 'customTitle' }
  },
  {
    title: '操作',
    key: 'action',
    slots: { title: 'customTitle', customRender: 'action' }
  }
]
export default {
  setup () {
    const data = reactive({
      tableData: []
    })
    const pagination = ref({
      defaultPageSize: 5,
      showTotal: total => `共 ${data.tableData.length} 条数据`,
      // showSizeChanger: true,
      // pageSizeOptions: ['5', '10', '15', '20'],
      onShowSizeChange: (current, pageSize) => {
        this.pageSize = pageSize
      }
    })
    const secCate = reactive({
      data: []
    })
    onMounted(async () => {
      const res = await GetCourseByParentCategory('5f799255a3a37d67642a3b0e')
      const cates = await GetSecCate()
      secCate.data = cates.data.childCate
      console.log(res.data)
      data.tableData = res.data
      // console.log(toRaw(data.tableData))
    })
    // 组件方法
    function handleEdit (id) {
      console.log(id)
      router.push(`/course/edit/${id}`)
    }
    const instance = getCurrentInstance()
    function handleDelete (id) {
      let parentCate = null
      GetParentCateById(id).then(async (res) => {
        parentCate = res.data
        await ResourceDelete('courses', id)
        instance.ctx.$message.success('删除成功！')
        const result = await GetCourseByParentCategory(parentCate._id)
        data.tableData = result.data
      })
        .catch(() => {
          instance.ctx.$message.error('删除失败！')
        })
    }
    function TabPaneChange (key) {
      console.log(key)
      GetCourseByParentCategory(key).then(res => {
        console.log(res)
        data.tableData = res.data
      }).catch(err => { console.log(err) })
    }
    return { data, handleEdit, pagination, handleDelete, secCate, TabPaneChange }
  },
  data () {
    return {
      columns
    }
  }
}
</script>

<style lang="scss" scoped></style>
